<template>
    <div class="warpper-box">
      <a-form layout="inline" :form="events_form">
        <a-form-item label="姓名/手机">
          <a-input placeholder="姓名/手机" v-decorator="['keyword']"></a-input>
        </a-form-item>
        <a-form-item label="部门">
          <a-tree-select
                style="width:220px"
              :tree-data="orgData"
              :dropdown-style="{ maxHeight: '200px', overflow: 'auto'}"
              :replace-fields="orgFields"
              v-decorator="['orgId']"
              placeholder="请选择部门">
          </a-tree-select>
        </a-form-item>
        <a-form-item>
           <a-button type='primary' @click="$refs.table.refresh(true)">查询</a-button>
          <a-button type='primary' @click="reset">重置</a-button>
          <a-button type='primary' @click="$refs.createStaff.add(true)">新增</a-button>
        </a-form-item>
        </a-form>
      <s-table
        row-key="id"
        showPagination="auto"
          ref="table" showQuickJumper
      size="default"
        :columns="columns"
        :data="loadData">
          <span slot="status" slot-scope="text, record">
            <a-switch checked-children="启用" :disabled="true" un-checked-children="禁用" 
            :checked="record.status === 1 ? true : false"
            default-checked />
          </span>
          <span slot="action" slot-scope="text, record">
            <template v-if="record.status === 1">
              <a-popconfirm
                    title="确认停用？"
                    ok-text="确认"
                    cancel-text="取消"
                    @confirm="handelUserStatusChange(record)" >
                     <a>停用</a>
                </a-popconfirm>
              <a-divider type="vertical" />
            </template>
            <template v-if="record.status === 2">
              <a-popconfirm
                    title="确认启用？"
                    ok-text="确认"
                    cancel-text="取消"
                    @confirm="handelUserStatusChange(record)" >
                     <a>启用</a>
                </a-popconfirm>
              <a-divider type="vertical" />
            </template>
            <a @click="$refs.createStaff.add(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm
                title="确认删除?"
                ok-text="确认"
                cancel-text="取消"
                @confirm="remove(record)" >
                  <a>删除</a>
            </a-popconfirm>
          </span>
      </s-table>
      <add-staff ref="createStaff" @on-ok="staffLoad"/>
    </div>
</template>

<script>
import { STable } from '@/components'
import { mapGetters,mapActions } from 'vuex'
import store from '@/store'
import moment from 'moment'
import {getStaffPage,addStaff,editStaff,delStaff,enableStaff} from "@/api/human/staff"
import {COLUMNS_STAFF} from "./form"
import {OPTION_BLOCK,OPTION_INLINE} from "../base_form"
import AddStaff from "./add_gardener"
export default {
  name: 'gardenerList',
  components: {
    STable,
    AddStaff
  },
  data () {
    return {
      columns:COLUMNS_STAFF,
      parentOrgId:'-1',
      loadData:parameter => {
        let formdata = this.events_form.getFieldsValue();
        return getStaffPage(Object.assign(parameter,formdata)).then(res => {
          return {
            pageNo:res.data.number,
            pageSize:res.data.size,
            totalCount: res.data.total,
            totalPage: Math.ceil(res.data.total / 10),
            data: res.data.content
          }
        })
      }
    }
  },
  computed: {
      ...mapGetters(['orgData','orgFields','orgRoleData']),
  },
  filters: {
    filterMore (value,num) {
      if (!value) return ''
      if (value.length > num) {
          return value.slice(0,num) + '...'
      }
      return value
    }
  },
  mounted(){
   window.addEventListener('keyup',this.keyDown);
 },
 destroyed(){
   window.removeEventListener('keyup',this.keyDown);
 },
 beforeCreate() {
      this.events_form = this.$form.createForm(this,{name:'events_form'})
  },
  created () {
    this.getAllDepartmentTree(this.parentOrgId);
  },
  methods: {
    ...mapActions({
      getAllDepartmentTree:'department/getAllDepartmentTree'
    }),
     keyDown(e){
      if(e.keyCode == 13){
        this.$refs.table.refresh(true);
      }
    },
    async remove(item){
      let params = {ids:[item.id]}
      const {code} = await delStaff(params);
      if(code === '1'){
        this.$message.success('操作成功');
        this.$refs.table.refresh(true);
      }
    },
    async handelUserStatusChange(el){
     let params = {
        id:el.id,
        status:el.status === 1?2:1 
      }
      const {code} = await enableStaff(params);
        if(code === '1'){
          this.$message.success('操作成功');
          this.$refs.table.refresh(false);
      }
    },
    staffLoad(state){
       this.$refs.table.refresh(state);
    },
    reset () {
      this.events_form.resetFields();
      this.$refs.table.refresh(true);
    }
  }
}
</script>
